<script setup lang="ts">


import {addPoints, addShop, getMoreDetail, getSwiper, getSwiperRouter, shopcheck, userList} from "@/api/home";
import {ref} from "vue";
import router from "@/router";
// import {i} from "vite/dist/node/types.d-aGj9QkWt";
import * as path from "path";
import {useRouter} from "vue-router";
// import {route} from "vant/es/composables/use-route";

let swiperList =ref()
getSwiper().then(res=>{
    // console.log(res)
    swiperList.value = res.rows.map(item=>{
        item.mediaLink ='http://192.168.5.120:8199' +item.mediaLink
        return item
    })
})

//
// shopcheck().then(res=>{
//     console.log(res)
// })
// addPoints().then(res=>{
//     console.log(res)
// })
//
// addShop().then(res=>{
//     console.log(res)
// })
// userList().then(res=>{
//     console.log(res)
// })

const router1 = useRouter()
function toNext(item) {
    router1.push( {
        path:'swipernext',
        query: {
            mediaId:item.mediaId
        }
    })
}


</script>

<template>
  <div class="swiperBox">
      <div class="imgs">
          <van-swipe :autoplay="3000" lazy-render touchable="true">
              <van-swipe-item v-for="item in swiperList" :key="item.mediaId" >
<!--                  <router-link to="./swipernext">-->
<!--                  <router-link :to="item.mediaId">-->
<!--                  <router-link :to="{name:'detail',params:{mediaId:item.mediaId}}">-->
<!--                      点击图片传id给get 然后拼接地址 跳转-->

                  <div class="imgBox" :item="item" @click="toNext(item)">
                          <img :src="item.mediaLink" alt=""/>
                  </div>
<!--                  </router-link>-->
              </van-swipe-item>
          </van-swipe>
      </div>
  </div>
</template>

<style scoped>
.swiperBox {
    width: 345px;
    height: 175px;
    margin: 5px 15px ;
    overflow: hidden;
    .imgs {
        width: 340px;
        background-color: #fff;
        border-radius: 5px;
        //border: 1px solid red;
        overflow: hidden;
    }
    .imgBox {
        width: 330px;
        margin: 5px ;
        height: 160px;
        border-radius: 5px;
        //border: 1px solid red;
        >img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>